<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>日志查询</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html,
        body,
        #app,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }

        .el-main {
            padding: 4px;
        }
    </style>
</head>

<body>
    <el-container id="app">
        <el-main>
            <el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
                size="mini" style="height: 36px">
                <el-form-item label="日志类型">
                    <el-select v-model="queryData.logType" clearable placeholder="请选择日志类型" @change="queryChange()">
                        <el-option v-for="item in logTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="返回代码">
                    <el-select v-model="queryData.logResultCode" clearable placeholder="请输入返回代码"
                        @change="queryChange()">
                        <el-option v-for="item in logResultCodeOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <vxe-grid border stripe ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source
                @page-change="handlePageChange" :height="tableHeight" size="mini" class="checkbox-table" :checkbox-config="{ trigger: 'row'}"
                :pager-config="tablePage" :proxy-config="tableProxy" :toolbar="tableToolbar"
                :export-config="tableExport" @toolbar-button-click="toolbarButtonClickEvent">
                <vxe-table-column type="checkbox" width="60" headerAlign="center" align="center"></vxe-table-column>
                <vxe-table-column type="seq" title="序号" width="60" headerAlign="center" align="center">
                </vxe-table-column>
                <vxe-table-column title="操作" width="60" headerAlign="center" align="center" show-overflow>
                    <template v-slot="{ row }">
                        <vxe-button type="text" icon="fa fa-trash-o vxe-danger-color" @click="removeEvent(row)"
                            title="删除"></vxe-button>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="id" title="日志编号" width="250" headerAlign="center" align="center"
                    :visible="visible"></vxe-table-column>
                <vxe-table-column field="logType" title="日志类型" width="200" headerAlign="center" align="center">
                </vxe-table-column>
                <vxe-table-column field="logUserCode" title="操作者" width="100" headerAlign="center" align="center">
                </vxe-table-column>
                <vxe-table-column field="logUserIp" title="操作者IP" width="120" headerAlign="center" align="center">
                </vxe-table-column>
                <vxe-table-column field="logUrl" title="访问地址" width="320" headerAlign="center" align="left">
                </vxe-table-column>
                <vxe-table-column field="logTimes" title="访问时间" width="160" headerAlign="center" align="center">
                </vxe-table-column>
                <vxe-table-column field="logRequestData" title="请求数据" width="220" headerAlign="center" align="center">
                </vxe-table-column>
                <vxe-table-column field="logResultCode" title="返回代码" width="80" headerAlign="center" align="center">
                </vxe-table-column>
                <vxe-table-column field="logResultData" title="返回数据" width="220" headerAlign="center" align="center">
                </vxe-table-column>
            </vxe-grid>

        </el-main>
    </el-container>
</body>
<script type="text/javascript">
    window.onload = function () {
        var main = {
            data() {
                return {
                    loading: false,
                    disabled: false,
                    visible: false,
                    tableHeight: '100%',
                    tablePage: {
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 15,
                        align: 'left',
                        pageSizes: [15, 30, 45, 60, 75, 90],
                        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
                            'Total'
                        ],
                    },
                    tableProxy: {
                        props: {
                            result: 'data.rows',
                            total: 'data.total'
                        },
                        ajax: {
                            // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax） page 对象： { pageSize, currentPage }
                            query: ({
                                page,
                                sort,
                                filters
                            }) => {
                                // 处理排序条件
                                let queryParams = Object.assign({
                                    sort: sort.property,
                                    order: sort.order
                                }, this.queryData);
                                // 处理筛选条件
                                filters.forEach(({
                                    column,
                                    property,
                                    values
                                }) => {
                                    queryParams[property] = values.join(',')
                                });
                                //console.info(queryParams);
                                return XEAjax.get(
                                    `${curl}/log/getLogList?currentPage=${page.currentPage}&pageSize=${page.pageSize}`,
                                    queryParams);
                            }
                        }
                    },
                    tableToolbar: {
                        id: 'toolbar',
                        size: 'mini',
                        perfect: true,
                        buttons: [{
                                code: 'btnRemove',
                                name: '全部删除',
                                status: 'perfect',
                                icon: 'fa fa-trash vxe-danger-color'
                            },
                            {
                                code: 'btnExport',
                                name: '导出',
                                status: 'perfect',
                                icon: 'fa fa-file-excel-o vxe-info-color'
                            }
                        ],
                        refresh: {
                            icon: 'fa fa-refresh',
                            iconLoading: 'fa fa-spinner fa-spin'
                        },
                        zoom: {
                            iconIn: 'fa fa-arrows-alt',
                            iconOut: 'fa fa-expand'
                        },
                        custom: {
                            icon: 'fa fa-cog',
                            storage: true,
                            checkMethod: this.checkColumnMethod
                        }
                    },
                    tableExport: {
                        filename: 'export',
                        sheetName: 'Sheet1',
                        type: 'xlsx',
                        // 自定义类型
                        types: ['xlsx', 'csv', 'html', 'xml', 'txt']
                    },
                    submitLoading: false,
                    queryData: {
                        logType: "",
                        logResultCode: ""
                    },
                    logTypeOptions: [],
                    logResultCodeOptions: []
                }
            },
            created() {
                this.getLogTypeOptions();
                this.getLogResultCodeOptions();
            },
            mounted() {
                this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
            methods: {
                batchRemove() {
                    var rows = this.$refs.xGrid.getCheckboxRecords();
                    if (rows.length <= 0) {
                        this.$XModal.message({
                            message: '请选择需要删除的记录',
                            status: 'error'
                        });
                        return false;
                    }
                    this.$XModal.confirm(`您确定要把当前选中的数据删除吗?`).then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let params = Object.assign(rows);
                            //console.info(params);
                            XEAjax.post(`${curl}/log/batchRemove`, params).then(data => {
                                if (data.code == 200) {
                                    this.$refs.xGrid.commitProxy('reload');
                                    this.$XModal.message({
                                        message: data.msg,
                                        status: 'success'
                                    });
                                } else {
                                    this.$XModal.message({
                                        message: data.msg,
                                        status: 'error'
                                    });
                                }
                            });
                            this.submitLoading = false;
                        }
                    });
                },
                removeEvent(row) {
                    this.$XModal.confirm('您确定要删除该数据?').then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let params = Object.assign(row);
                            XEAjax.post(`${curl}/log/delete`, params).then(data => {
                                if (data.code == 200) {
                                    this.$refs.xGrid.commitProxy('reload');
                                    this.$XModal.message({
                                        message: data.msg,
                                        status: 'success'
                                    });
                                    this.showEdit = false;
                                } else {
                                    this.$XModal.message({
                                        message: data.msg,
                                        status: 'error'
                                    });
                                }
                            });
                            this.submitLoading = false;
                        }
                    });
                },
                getLogTypeOptions() {
                    XEAjax.get(`${curl}/log/getLogTypeOptions`).then(data => {
                        this.logTypeOptions = data.data;
                    });
                },
                getLogResultCodeOptions() {
                    XEAjax.get(`${curl}/log/getLogResultCodeOptions`).then(data => {
                        this.logResultCodeOptions = data.data;
                    });
                },
                queryChange() {
                    this.$refs.xGrid.commitProxy('reload');
                },
				
                searchEvent(formName, acType) {
                    if (acType == 0) {
                        this.queryData = {
                            logType: "",
                            logResultCode: ""
                        }
                        this.$refs[formName].resetFields();
                    }
                    this.$refs.xGrid.commitProxy('reload');
                },
                formatDate({
                    cellValue
                }) {
                    return XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
                },
                toolbarButtonClickEvent({
                    code
                }, event) {
                    switch (code) {
                        case 'btnRemove':
                            this.batchRemove();
                            break;
                        case 'btnExport':
                            this.$refs.xGrid.exportData({
                                filename: '日志列表',
                                sheetName: 'Sheet1',
                                type: 'xlsx'
                            });
                            break;
                    }
                },
                checkColumnMethod({
                    column
                }) {
                    if (['logType', 'logResultCode'].includes(column.property)) {
                        return false
                    }
                    return true
                }
            }
        };

        var vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>

</html>